<template>
    <div class="sidebar">
        <el-menu
                class="sidebar-el-menu"
                :default-active="onRoutes"
                :collapse="collapse"
                background-color="#324157"
                text-color="#bfcbd9"
                active-text-color="#20a0ff"
                unique-opened
                router
        >
            <template v-for="item in arr">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                    v-if="subItem.subs"
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item
                                        v-for="(threeItem,i) in subItem.subs"
                                        :key="i"
                                        :index="threeItem.index"
                                >{{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                    v-else
                                    :index="subItem.index"
                                    :key="subItem.index"
                            >{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item v-if="item.index !=='goback'" :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                    <el-menu-item v-else @click="backTo()">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';
    import router from 'vue-router';


  export default {
    data() {
      return {
        collapse: false,
        arr: [],
        items: [
          {
            icon: 'el-icon-lx-home',
            index: 'dashboard',
            title: '我的工作台'
          },
          {
            icon: 'el-icon-lx-cascades',
            index: 'project',
            title: '多项目管理',
          },
          // {
          //   icon: 'el-icon-lx-copy',
          //   index: 'tabs',
          //   title: 'tab选项卡'
          // },
          // {
          //   icon: 'el-icon-lx-calendar',
          //   index: '3',
          //   title: '文档管理(表单相关)',
          //   subs: [
          //     {
          //       index: 'form',
          //       title: '文档查看'
          //     },
          //     {
          //       index: '3-2',
          //       title: '文档编辑',
          //       subs: [
          //         {
          //           index: 'editor',
          //           title: '富文本编辑器'
          //         },
          //         {
          //           index: 'markdown',
          //           title: 'markdown编辑器'
          //         }
          //       ]
          //     },
          //     {
          //       index: 'upload',
          //       title: '文档上传'
          //     },
          //     {
          //       index: 'download',
          //       title: '文档下载'
          //     }
          //   ]
          // },
          // {
          //   icon: 'el-icon-lx-group',
          //   index: 'team',
          //   title: '团队管理'
          // },
          //   {
          //       icon: 'el-icon-lx-cascades',
          //       index: 'table',
          //       title: '基础表格'
          //   },
          // {
          //     icon: 'el-icon-lx-copy',
          //     index: 'tabs',
          //     title: 'tab选项卡'
          // },
          // {
          //     icon: 'el-icon-lx-calendar',
          //     index: '3',
          //     title: '表单相关',
          //     subs: [
          //         {
          //             index: 'form',
          //             title: '基本表单'
          //         },
          //         {
          //             index: '3-2',
          //             title: '三级菜单',
          //             subs: [
          //                 {
          //                     index: 'editor',
          //                     title: '富文本编辑器'
          //                 },
          //                 {
          //                     index: 'markdown',
          //                     title: 'markdown编辑器'
          //                 }
          //             ]
          //         },
          //         {
          //             index: 'upload',
          //             title: '文件上传'
          //         }
          //     ]
          // },
          //     {
          //         icon: 'el-icon-lx-emoji',
          //         index: 'icon',
          //         title: '自定义图标'
          //     },
          //     {
          //         icon: 'el-icon-pie-chart',
          //         index: 'charts',
          //         title: 'schart图表'
          //     },
          //     {
          //         icon: 'el-icon-rank',
          //         index: '6',
          //         title: '拖拽组件',
          //         subs: [
          //             {
          //                 index: 'drag',
          //                 title: '拖拽列表'
          //             },
          //             {
          //                 index: 'dialog',
          //                 title: '拖拽弹框'
          //             }
          //         ]
          //     },
          //     {
          //         icon: 'el-icon-lx-global',
          //         index: 'i18n',
          //         title: '国际化功能'
          //     },
          //     {
          //         icon: 'el-icon-lx-warn',
          //         index: '7',
          //         title: '错误处理',
          //         subs: [
          //             {
          //                 index: 'permission',
          //                 title: '权限测试'
          //             },
          //             {
          //                 index: '404',
          //                 title: '404页面'
          //             }
          //         ]
          //     },
          //     {
          //         icon: 'el-icon-lx-redpacket_fill',
          //         index: '/donate',
          //         title: '支持作者'
          //     }
        ],
        linktimes: 0,
        projectItems: [
          {
            icon: 'el-icon-arrow-left',
            index: 'goback',
            title: '返回上级'
          },
          {
            icon: 'el-icon-data-line',
            index: `overview?projectId=${this.$route.query.projectId}`,
            title: '项目概览'
          },
          {
            icon: 'el-icon-sort',
            index: `iteration?projectId=${this.$route.query.projectId}`,
            title: '项目迭代'
          },
          {
            icon: 'el-icon-lx-calendar',
            index: `announcement?projectId=${this.$route.query.projectId}`,
            title: '项目公告'
          },
          {
            icon: 'el-icon-finished',
            index: `workItem?projectId=${this.$route.query.projectId}`,
            title: '工作项管理'
          },
          {
            icon: 'el-icon-document',
            index: `document?projectId=${this.$route.query.projectId}`,
            title: '文档管理'
          },
          {
            icon: 'el-icon-lx-group',
            index: `member?projectId=${this.$route.query.projectId}`,
            title: '成员管理'
          },
        ]
      };
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    watch: {
      $route(to, from) {
        console.log(this.$route);
        if (this.$route.fullPath.indexOf('/projectone') !== -1) {
          this.linktimes += 1;
          this.arr = this.projectItems;
        } else {
          this.arr = this.items;
          this.linktimes = 0;
        }
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        this.collapse = msg;
        bus.$emit('collapse-content', msg);
      });
      if (this.$route.fullPath.indexOf('/projectone') !== -1) {
        this.arr = this.projectItems
      } else {
        this.arr = this.items
      }
    },
    methods: {
      backTo() {
        let linkTo = this.linktimes;
        // console.log(this.$router.push('/dashboard'));
        linkTo === 0 ?
          this.$router.push("/dashboard"):
          window.history.go(-linkTo);
      }
    },
  };

</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar > ul {
        height: 100%;
    }
</style>
